<template>
  <div class="indexPoll-page app-container">
    <!-- <div class="container"> -->
    <div class="left">
      <div class="l-top">
        <span class="lt-tip" @click="classifyOpenHandle()">新增</span>
      </div>
      <el-tree
        ref="tree"
        :data="treeList"
        :props="{ children: 'list', label: 'modelName' }"
        highlight-current
        node-key="id"
        :default-expanded-keys="[activeType]"
        @node-click="treeClickHandle"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <el-tooltip
            v-if="data.id && data.id !== '_'"
            content="编辑"
            placement="top"
          >
            <i class="el-icon-edit" @click.stop="classifyOpenHandle(data)"></i>
          </el-tooltip>
          <el-tooltip
            v-if="data.id && data.id !== '_'"
            content="删除"
            placement="top"
          >
            <i
              class="el-icon-remove-outline"
              @click.stop="delectHandle(data.id)"
            ></i>
          </el-tooltip>
        </span>
      </el-tree>
    </div>
    <div class="right">
      <el-form
        ref="dataForm"
        :inline="true"
        label-width="82px"
        :model="dataForm"
      >
        <el-form-item label="指数名称" prop="typeName">
          <el-input
            v-model="dataForm.typeName"
            clearable
            placeholder="请输入指数名称"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-button class="bg-green" size="small" @click="queryAllIndexType">
            查询
          </el-button>
          <el-button size="small" @click="resetForm">重置</el-button>
          <el-button
            v-if="hasCommonIndex === 1"
            v-show="activeType"
            type="danger"
            size="small"
            @click="addOrUpdateTypeHandle()"
          >
            添加
          </el-button>
          <el-button size="small" type="primary" @click="goIndexPollDetails()">
            指数分析
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="list"
        fit
        size="mini"
        max-height="637"
        :header-cell-style="{ background: '#dcedff', color: '#32639d' }"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60"
        ></el-table-column>
        <el-table-column prop="typeName" label="指数名称" align="center">
          <template slot-scope="scope">
            <span
              style="color: #4f95dd; cursor: pointer"
              @click="goIndexPollDetails(scope.row.id)"
              >{{ scope.row.typeName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="430" align="center">
          <template slot-scope="{ row }">
            <el-button
              class="filter-item"
              size="mini"
              :type="row.defaultFlag ? 'info' : 'primary'"
              @click="setDefaultFlagHandle(row)"
            >
              {{ row.defaultFlag ? "取消默认" : "设为默认" }}
            </el-button>
            <el-button
              class="filter-item"
              size="mini"
              :type="row.commonIndex ? 'info' : 'primary'"
              @click="setCommonIndexHandle(row)"
            >
              {{ row.commonIndex ? "取消常用" : "设为常用" }}
            </el-button>
            <el-button
              class="filter-item"
              size="mini"
              style="margin-left: 10px"
              type="primary"
              icon="el-icon-edit-outline"
              @click="enternetValueHandle(row)"
            >
              录入净值
            </el-button>
            <el-button
              class="filter-item"
              size="mini"
              style="margin-left: 10px"
              type="primary"
              icon="el-icon-edit"
              @click="addOrUpdateTypeHandle(row)"
            >
              编辑
            </el-button>
            <el-button
              class="filter-item"
              size="mini"
              style="margin-left: 10px"
              type="primary"
              icon="el-icon-delete"
              @click="delectTypeHandle(row)"
              v-if="hasCommonIndex === 1"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <classifyOpen
      v-if="classifyOpenVisible"
      ref="classifyOpen"
      @openClose="queryAllIndexType"
    ></classifyOpen>
    <typeOpen
      v-if="typeOpenVisible"
      ref="typeOpen"
      @openClose="queryAllIndexType"
    ></typeOpen>
    <enternetValueOpen
      ref="enternetValueOpen"
      v-if="hasEnternetValueOpen"
      @closeOpen="queryAllIndexType"
    ></enternetValueOpen>
    <!-- </div> -->
  </div>
</template>

<script>
import {
  queryAllIndexTypeById,
  deleteIndexModelById,
  addOrUpdateIndex,
} from "@/api/setting";
import classifyOpen from "./classifyOpen";
import typeOpen from "./typeOpen";
import enternetValueOpen from "./enternetValueOpen.vue";

export default {
  name: "IndexPoll",
  components: { classifyOpen, typeOpen, enternetValueOpen },
  data() {
    return {
      hasEnternetValueOpen: false,
      dataForm: {
        typeName: "",
      },
      list0: [], // 存放 全部指数
      treeList: [
        {
          id: 0,
          modelName: "全部指数",
          lists: [],
          list: [],
        },
      ],
      list: [],
      commonIndexArr: [],
      commonIndexId: 0,
      hasCommonIndex: 1,
      activeType: 1,
      classifyOpenVisible: false,
      typeOpenVisible: false,
    };
  },
  created() {
    this.queryAllIndexType();
  },
  methods: {
    enternetValueHandle(row) {
      this.hasEnternetValueOpen = true;
      this.$nextTick(() => {
        this.$refs.enternetValueOpen.init(row.id);
      });
    },
    goIndexPollDetails(id) {
      this.$router.push({
        path: "/indexPoll/indexPollDetails",
        query: {
          type: this.activeType,
          id,
        },
      });
    },
    delectHandle(id) {
      this.$confirm("确认删除？", "提示", {
        customClass: "del-model",
        type: "warning",
      })
        .then((_) => {
          this.deleteIndexModelById(id);
        })
        .catch((_) => {});
    },
    classifyOpenHandle(row) {
      this.classifyOpenVisible = true;
      this.$nextTick(() => {
        this.$refs.classifyOpen.init(row);
      });
    },
    addOrUpdateTypeHandle(row) {
      this.typeOpenVisible = true;
      this.$nextTick(() => {
        const i = this.treeList[0].list.findIndex(
          (item) => item.id == this.activeType
        );
        this.$refs.typeOpen.init(this.treeList[0].list[i].id, row);
      });
    },
    delectTypeHandle(row) {
      this.$confirm("确认删除？", "提示", {
        customClass: "del-model",
        type: "warning",
      })
        .then((_) => {
          row.deleteFlag = 0;
          addOrUpdateIndex({
            ...row,
          }).then((res) => {
            if (res.code == 0) {
              this.$notify({
                message: res.body,
                type: "success",
                duration: 2000,
              });
              this.queryAllIndexType();
            }
          });
        })
        .catch((_) => {});
    },
    resetForm() {
      this.$refs.dataForm.resetFields();
      this.queryAllIndexType();
    },
    deleteIndexModelById(id) {
      deleteIndexModelById({ id }).then((res) => {
        this.$notify({
          message: "删除成功",
          type: "success",
          duration: 2000,
        });
        this.queryAllIndexType();
      });
    },
    treeClickHandle(data) {
      data.id
        ? (this.list = data.lists.filter((item) => item.deleteFlag == 1))
        : (this.list = this.list0);
      this.activeType = data.id;
      this.hasCommonIndex = data.id === "_" ? 0 : 1;
    },
    allQuery(keyWord) {
      var arr = [];
      for (var i = 0; i < this.treeList[0].lists.length; i++) {
        if (this.treeList[0].lists[i].typeName.match(keyWord) != null) {
          arr.push(this.treeList[0].lists[i]);
        }
      }
      this.list = arr;
    },
    // 设为默认
    setDefaultFlagHandle(row) {
      row.defaultFlag ? (row.defaultFlag = 0) : (row.defaultFlag = 1);
      addOrUpdateIndex({
        ...row,
      }).then((res) => {
        if (res.code == 0) {
          this.$notify({
            message: res.body,
            type: "success",
            duration: 2000,
          });
        }
      });
    },
    // 设为常用
    setCommonIndexHandle(row) {
      row.commonIndex ? (row.commonIndex = 0) : (row.commonIndex = 1);
      addOrUpdateIndex({
        ...row,
      }).then((res) => {
        if (res.code == 0) {
          this.$notify({
            message: res.body,
            type: "success",
            duration: 2000,
          });
          this.queryAllIndexType();
        }
      });
    },
    commonIndexInit() {
      this.commonIndexArr = this.treeList[0].lists.filter((item) => {
        return item.commonIndex === 1;
      });
      this.treeList[0].list.push({
        deleteFlag: 1,
        id: "_",
        lists: this.commonIndexArr,
        modelName: "常用指数",
      });
      if (this.activeType === "_") {
        this.treeClickHandle(
          this.treeList[0].list[this.treeList[0].list.length - 1]
        );
      }
    },
    queryAllIndexType() {
      queryAllIndexTypeById({
        id: this.activeType === "_" ? "" : this.activeType,
        ...this.dataForm,
      }).then((res) => {
        this.treeList[0].list = res.body;
        if (this.activeType) {
          if (this.dataForm.typeName == "") {
            let _list0 = [];
            res.body
              .map((item) => item.lists)
              .map((item) => {
                _list0 = _list0
                  .concat(item)
                  .filter((item) => item.deleteFlag == 1);
              });
            this.list0 = _list0;
          }
          this.treeList[0].lists = this.list0;
          const i = this.treeList[0].list.findIndex(
            (item) => item.id == this.activeType
          );
          if (this.treeList[0].list[i]) {
            // 排除最后一个被删除找不到i
            this.list = this.treeList[0].list[i].lists.filter(
              (item) => item.deleteFlag == 1
            );
          } else {
            this.list = this.treeList[0].list[0].lists.filter(
              (item) => item.deleteFlag == 1
            );
            this.activeType = this.activeType === "_" ? "_" : 1;
          }
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.activeType);
          });
        } else {
          this.allQuery(this.dataForm.typeName);
        }
        this.commonIndexInit();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}
.indexPoll-page {
  display: flex;
  justify-content: space-between;
  .left {
    width: 16%;
    min-width: 180px;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid #ddd;
    .l-top {
      line-height: 34px;
      padding: 0 12px;
      .lt-tip {
        cursor: pointer;
        padding: 4px 8px;
        color: #fff;
        border-radius: 2px;
        background: #409eff;
      }
    }
    .l-line {
      padding: 5px 12px;
      cursor: pointer;
      &:hover {
        background: #eee;
      }
    }
    .active {
      background: #eee;
    }
    ::v-deep .el-tree {
      .el-icon-edit {
        padding-left: 12px;
        color: cornflowerblue;
      }
      .el-icon-remove-outline {
        padding-left: 8px;
        color: crimson;
      }
    }
  }
  .right {
    width: calc(84% - 20px);
    padding: 6px;
    border: 1px solid #ddd;
  }

  // .del-model {
  //   .el-message-box__btns {
  //     .el-button:nth-child(1) {
  //       float:right;
  //     }
  //     .el-button:nth-child(2) {
  //       margin-right:10px;
  //       background-color:#2d8cf0;
  //       border-color:#2d8cf0;
  //     }
  //   }
  // }
}
</style>
